<template>
  <div v-bind="formItemLayout">
    <Form :model="formState" layout="inline" class="form-wrapper" :labelCol="{ span: 12 }" :wrapperCol="{ span: 4 }">
      <FormItem name="tenantList" label="租户">
        <Select
          v-model:value="formState.tenantName"
          mode="multiple"
          maxTagCount="responsive"
          :options="tenantList"
          placeholder="请选择"
        ></Select>
      </FormItem>

      <FormItem v-if="props.activeKey === '1'" name="appList" label="应用">
        <Select
          v-model:value="formState.appName"
          mode="multiple"
          maxTagCount="responsive"
          :options="appList"
          placeholder="请选择"
        ></Select>
      </FormItem>

      <FormItem name="period" label="统计周期">
        <Select
          v-model:value="formState.period"
          :options="props.activeKey === '1' ? periodList1 : periodList2"
          placeholder="请选择"
        ></Select>
      </FormItem>

      <FormItem v-if="ifShow" name="period" label="统计值">
        <Select v-model:value="formState.standard" :options="standardList" placeholder="请选择"></Select>
      </FormItem>

      <FormItem name="date" label="日期">
        <RangePicker v-model:value="formState.date"></RangePicker>
      </FormItem>

      <div class="btn-wrapper">
        <Button @click="reset">重置</Button>
        <Button type="primary" style="margin-left: 10px" @click="search" :disabled="isDisabled">查询</Button>
      </div>
    </Form>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { Button, DatePicker, Form, FormItem, Select } from 'ant-design-vue';
import { getAppList, getTenantList } from '/@/api/measurement-center/user-statistic/userStatistic';

const props = defineProps({
  activeKey: String,
});

const { RangePicker } = DatePicker;

const formState = ref({
  tenantName: undefined,
  appName: undefined,
  period: undefined,
  standard: undefined,
  date: undefined,
});

const periodList1 = ref([
  {
    label: '天',
    value: 'day',
  },
  {
    label: '小时',
    value: 'hour',
  },
]);

const periodList2 = ref([
  {
    label: '天',
    value: 'day',
  },
  {
    label: '周',
    value: 'week',
  },
  {
    label: '月',
    value: 'month',
  },
]);

const standardList = ref([
  {
    label: '最大值',
    value: 'max',
  },
  {
    label: '最小值',
    value: 'min',
  },

  {
    label: '求和值',
    value: 'sum',
  },
]);

const tenantList = ref<any[]>([]);

const appList = ref<any[]>([]);

const formItemLayout = {
  labelCol: { span: 16 },
  wrapperCol: { span: 24 },
};

let isDisabled = computed(() => {
  if (props.activeKey === '1' && formState.value.period == 'day') {
    if (!formState.value.standard) {
      return true;
    }
  } else if (formState.value.period == 'week' || formState.value.period == 'month') {
    if (!formState.value.standard) {
      return true;
    }
  }
  return false;
});

let ifShow = computed(() => {
  if (props.activeKey === '1' && formState.value.period == 'day') {
    return true;
  } else if (props.activeKey === '2' && (formState.value.period == 'week' || formState.value.period == 'month')) {
    return true;
  }
  return false;
});

const handleParams = (handleParams) => {
  let ts0;
  let ts1;
  let params;

  if (handleParams.date) {
    ts0 = new Date(handleParams.date[0].format('YYYY-MM-DD'));
    ts1 = new Date(handleParams.date[1].format('YYYY-MM-DD'));
  } else {
    ts0 = new Date(new Date().getTime() + 8 * 60 * 60 * 1000 - 7 * 24 * 60 * 60 * 1000)
      .toJSON()
      .split('T')
      .join(' ')
      .substr(0, 19)
      .split(' ')[0];
    ts1 = new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toJSON().split('T').join(' ').substr(0, 19).split(' ')[0];
  }
  if (props.activeKey === '1' && formState.value.period == undefined) {
    handleParams.period = 'hour';
  } else if (props.activeKey === '2' && formState.value.period == undefined) {
    handleParams.period = 'day';
  }

  params = {
    tenantCodeList: handleParams.metric,
    appIdList: handleParams.appIdList,
    period: handleParams.period,
    statistic: handleParams.standard,
    startDate: ts0,
    endDate: ts1,
  };
  return params;
};

const emit = defineEmits(['get']);

const search = () => {
  let paramsOrigin = {
    metric: formState.value.tenantName,
    appIdList: formState.value.appName,
    period: formState.value.period,
    standard: formState.value.standard,
    date: formState.value.date,
  };
  let params = handleParams(paramsOrigin);

  emit('get', params);
};
onMounted(async () => {
  tenantList.value = await getTenantList();
  appList.value = await getAppList();
});

const reset = () => {
  formState.value = {
    tenantName: undefined,
    appName: undefined,
    period: undefined,
    standard: undefined,
    date: undefined,
  };
  let params;
  if (props.activeKey === '1') {
    params = {
      period: 'hour',
      startDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000 - 7 * 24 * 60 * 60 * 1000)
        .toJSON()
        .split('T')
        .join(' ')
        .substr(0, 19)
        .split(' ')[0],
      endDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000)
        .toJSON()
        .split('T')
        .join(' ')
        .substr(0, 19)
        .split(' ')[0],
    };
  } else if (props.activeKey === '2') {
    params = {
      period: 'hour',
      startDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000 - 7 * 24 * 60 * 60 * 1000)
        .toJSON()
        .split('T')
        .join(' ')
        .substr(0, 19)
        .split(' ')[0],
      endDate: new Date(new Date().getTime() + 8 * 60 * 60 * 1000)
        .toJSON()
        .split('T')
        .join(' ')
        .substr(0, 19)
        .split(' ')[0],
    };
  }

  emit('get', params);
};
</script>
<style lang="less">
.form-wrapper {
  padding: 20px 0;
  .ant-form-item {
    .ant-form-item-control-input {
      width: 100px;
    }
    .ant-calendar-picker-input {
      width: 250px;
    }
  }
}
.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  padding: 0px 20px;
}
</style>
